import styles from './index.module.less';
import { IconLink } from '@codexteam/icons';
import { make } from '../../utils/dom';

class InlinkTool {
    // 判断当前组件是否为inline类型
    static get isInline() {
        return true;
    }

    get toolboxIcon() {
        return IconLink
    }
    // To avoid your Inline Tool to be sanitized you need to provide sanitize configuration for it. It will be merged with Block Tool configuration where your Tool is allowed to use.
    static get sanitize() {
        return {
            span: true,
            a: true
        };
    }
    // 允许定义工具的快捷方式
    static get shortcut() {
        return 'CTRL+L';
    }
    // 允许定义可在悬停时出现的帮助工具提示中使用的工具标题
    static get title() {
        return '链接'
    }
    // 内联工具栏关闭时调用，可以使用它来重置一些内部工具的状态
    clear() {
        this.hideActions();
    }

    get state() {
        return this._state;
    }

    set state(state) {
        this._state = state;

        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
    }

    constructor({api}) {
        this.api = api;
        this.button = null;
        this._state = false;

        this.tag = 'A';
        this.class = styles['cdx-inline-link'];
    }

    render() {
        this.button = make('button', styles['paper'], {type: 'button'});
        this.button.innerHTML = this.toolboxIcon;
        this.button.classList.add(this.api.styles.inlineToolButton);

        return this.button;
    }

    // 应用插件时执行此方法
    surround(range) {
        if (this.state) {
            this.unwrap(range);
            return;
        }

        this.wrap(range);
    } 

    wrap(range) {
        const selectedText = range.extractContents();
        const mark = make(this.tag, this.class);
    
        mark.appendChild(selectedText);
        range.insertNode(mark);
    
        this.api.selection.expandToTag(mark);
    }

    unwrap(range) {
        const mark = this.api.selection.findParentTag(this.tag);
        const text = range.extractContents();
    
        mark.remove();
    
        range.insertNode(text);
    }

    // 选中内容时执行此方法
    checkState(selection) {
        const mark = this.api.selection.findParentTag(this.tag, this.class);
        this.state = !!mark;

        if (this.state) {
            this.showActions(mark);
        } else {
            this.hideActions();
        }
    }
    // 该方法返回我们想要添加的一些布局
    renderActions() {
        this.paperEl = make('span', styles['paperEl']);
        this.textarea = make('textarea', styles['textarea'], {row: 3});    
        this.saveBtn = make('span', styles['btn'], {innerHTML: '保存'});
        this.paperEl.append(this.textarea, this.saveBtn);  
    
        return this.paperEl;
    }

    showActions(mark) {
        this.paperEl.style.display = 'inline-block';
        if(mark.href) {
            this.textarea.value = mark.href;
        }
        this.saveBtn.onclick = () => {
            const value = this.textarea.value;
            mark.href = value;
            mark.target = '_blank';
            this.hideActions();
        };
    }

    hideActions() {
        this.textarea.onchange = null;
        this.saveBtn.onclick = null;
        this.paperEl.style.display = 'none';
    }
}

export default InlinkTool